<template>
  <div class="">
    <avue-form
        ref="configForm"
        :key="formKey"
        :option="formOption"
        v-model="formModel" @change="formModelChange"></avue-form>
  </div>
</template>

<script>

import actPropertiesFormOption from "./actPropertiesFormOption";
import {deepClone} from "utils/util";


export default {
  name: 'ElementForm',
  inject: ['prefix', 'width'],
  components: {},
  props: {
    modelValue: {
      type: Object,
      required: true
    },
  },
  computed: {
    formOption() {
      return actPropertiesFormOption.getActFormOption();
    },

  },
  watch: {
    modelValue: function (val) {
      if (val === this.formModel) {
        return
      }
      this.initFormModel(val)
    }
  },
  data() {
    return {
      formKey: Math.random(),
      formModel: {},
    };
  },

  created() {
    this.initFormModel(this.modelValue)
  },
  methods: {
    initFormModel(val) {
      this.formModel = deepClone(val);
      this.formKey = Math.random()
    },
    formModelChange(val) {
      this.formModel = val;
      this.$emit("update:modelValue", val)
    },

  }
}
</script>
